<template>
  <v-content v-if="JSON.stringify(data.detail) != '{}'" style="background-color: #f5f5f5">
    <swiper id="image_rect" :options="swiperOption" ref="mySwiper" style="height:3.75rem;width:3.75rem;">
      <swiper-slide v-for="(item,index) in data.detail.images" :key="index" id="index">
        <img style="height:3.75rem;width:3.75rem;object-fit:cover;" :src="item.image_url"></img>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="mw-column-style-style mw-main-background-white"
         style="padding:0.15rem 0.15rem;width: 3.45rem;margin-bottom:0.08rem;">
        <div class="mw-row-style" style="align-items: baseline;margin-bottom:0.1rem;">
          <div class="mw-main-red" style="font-size: 0.3rem;font-weight: bold">￥{{data.selected_spec.price}}</div>
          <div v-if="data.selected_spec.original_price != data.selected_spec.price" class="mw-third-text-color"
               style="font-weight:normal;text-decoration:line-through;font-size: 0.15rem;margin-left:0.01rem;">
            ￥{{data.selected_spec.original_price}}
          </div>
        </div>
      <div class="mw-first-text-color" style="font-size:0.17rem;line-height:0.2rem;font-weight:bold;margin-bottom:0.1rem;">
        {{data.detail.name}}
      </div>
    </div>
    <div class="mw-column-style-style mw-main-background-white"
         style="padding:0 0.15rem;width: 3.45rem;margin-top:0.08rem;">
      <div @click="pushdown(1)" class="mw-row-spacebetween-style" style="height:0.49rem;align-items: center">
        <div class="mw-row-style" style="align-items: center">
          <div class="mw-third-text-color" style="font-size: 0.13rem;margin-right:0.15rem;">规格</div>
          <div class="mw-single-line mw-first-text-color" style="font-size: 0.13rem;width:2.84rem">已选"{{data.selected_spec.name}}"</div>
        </div>
        <img style="width:0.06rem;height:0.12rem;object-fit: fill;"
             src="/static/resou_enter_more.png"/>
      </div>
      <div class="mw-horizon-divider"></div>
      <div class="mw-row-spacebetween-style" style="padding:0.15rem 0;align-items: center">
        <div class="mw-row-style" style="align-items: center;font-size: 0.13rem;">
          <div class="mw-third-text-color" style="margin-right:0.15rem;">服务</div>
          <div style="display: flex;flex-flow:row wrap;align-items:center;width: 2.84rem;">
            <div v-for="(item,index) in data.detail.services" class="mw-row-style" style="padding:0.08rem 0;margin-right:0.15rem;align-items:center;">
              <img src="/static/service_icon.png" style="height:0.12rem;width:0.12rem;object-fit: cover;margin-right:0.04rem;"/>
              <div class="mw-second-text-color" style="font-size:0.13rem">{{item.text}}</div>
            </div>
          </div>
        </div>
        <img style="width:0.06rem;height:0.12rem;object-fit: fill;"
             src="/static/resou_enter_more.png"/>
      </div>
    </div>
    <div class="mw-column-style" style="background-color: #ffffff;margin-bottom:0.49rem;margin-top:0.08rem">
      <div style="height:0.49rem;text-align: center;align-items: center;line-height: 0.49rem">图文详情</div>
      <img v-for="(item,index) in data.detail.details" :src="item.image_url" style="width: 100%;"></img>
    </div>
    <div @click="hiddenBackground" @touchmove.prevent
         style="z-index:98;position:fixed;bottom:0;left:0;width:3.75rem;background-color: #000000"
         :style="{transition:`all ${frametime}s`,opacity:opacity,height:fullscreenheight,visibility:backgroundDisplay}"></div>
    <div
      style="border-radius:0.1rem 0.1rem 0 0;z-index:99;padding-left:0.15rem;padding-right:0.15rem;position:fixed;width:3.45rem;background-color: #ffffff;left:0"
      :style="{transition:`all ${frametime}s`,bottom:frameY +'rem',height:frameheight + 'rem'}">
      <div  style="overflow: auto;" :style="{height:frameheight + 'rem'}">
        <div id="myframe" class="mw-column-style" style="position:relative;padding:0.15rem">
          <div v-if="frameStatus == 1" style="margin-bottom:0.49rem;" >
            <div class="mw-row-style" style="margin-bottom:0.25rem;align-items: flex-end">
              <img :src="data.selected_spec.image_url" style="height:1rem;width:1rem;object-fit: cover;border-radius: 0.12rem;margin-right:0.15rem;"/>
              <div class="mw-column-style">
                <div class="mw-row-style" style="align-items: baseline;margin-bottom:0.08rem">
                  <div class="mw-main-red" style="font-size: 0.2rem;font-weight: bold">￥{{data.selected_spec.price}}</div>
                  <div v-if="data.selected_spec.original_price != data.selected_spec.price" class="mw-third-text-color"
                       style="font-weight:normal;text-decoration:line-through;font-size: 0.1rem;margin-left:0.01rem;">
                    ￥{{data.selected_spec.original_price}}
                  </div>
                </div>
                <div class="mw-second-text-color" style="font-size:0.13rem">已选：{{data.selected_spec.name}}</div>
              </div>
            </div>
            <div class="mw-second-text-color" style="margin-bottom:0.11rem;font-size: 0.13rem;line-height: 0.18rem;">规格</div>
            <div style="display: flex;flex-flow:row wrap;align-items:center;">
              <div @click="changeSpec(item.id)" v-for="(item,index) in data.detail.products" :class="item.id == data.selected_spec.id ? 'spec_selected':'spec_unselected'" class="mw-background-color mw-row-style" style="margin:0 0.1rem 0.1rem 0;align-items:center;padding:0.02rem;border-radius: 0.04rem;">
                <img :src="item.image_url" style="height:0.28rem;width:0.28rem;object-fit: cover;border-radius: 0.02rem;margin-right:0.04rem;"/>
                <div class="mw-second-text-color" style="font-size: 0.13rem">{{item.name}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="frameStatus == 1" @click="data.skipToOrder" class="mw-first-text-color"  style="font-weight:bold;position:absolute;bottom:0;left:0;height:0.49rem;width:3.75rem;align-items: center;font-size: 0.15rem;line-height: 0.49rem;text-align: center;background-color: #FFCF0F;">直接购买</div>
    </div>

    <div class="mw-row-spacebetween-style mw-main-background-white" style="z-index:90;width:3.75rem;position: fixed;left:0;bottom:0;height:0.49rem;align-items: center">
      <div class="mw-row-style" style="align-items: center;">
        <div class="mw-column-center-style" style="margin-left:0.31rem;">
          <img src="/static/customer_service.png" style="width: 0.24rem;height:0.24rem;"/>
          <div class="mw-first-text-color" style="font-size: 0.09rem;line-height: 0.13rem">客服</div>
        </div>
        <div class="mw-column-center-style" style="margin-left:0.32rem;">
          <img @click="data.collect" style="height:0.24rem;width:0.24rem;object-fit:cover;" :src="data.detail.collected == 1 ? '/static/collected.png':'/static/article_uncollect.png'" />
          <div class="mw-first-text-color" style="font-size: 0.09rem;line-height: 0.13rem">收藏</div>
        </div>
      </div>

      <div @click="data.skipToOrder" class="mw-row-style mw-first-text-color" style="height:100%;align-items: center;font-size: 0.15rem">
        <div style="width: 2.32rem;height:100%;line-height: 0.49rem;text-align: center;background-color: #FFCF0F;">直接购买</div>
      </div>
    </div>
    <v-backhome enter="goodsdetail"></v-backhome>
  </v-content>

</template>
<script>
  import utils from '../../utils'
  import httputil from '../../httputil'
  import {mapModules, mapRules} from 'vuet'
  import 'swiper/dist/css/swiper.css'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'

  var vm = null;
  export default {
    mixins: [
      mapModules({data: 'goodsdetail'}),
      mapRules({store: [{path: 'goodsdetail'}],need: [{path: 'goodsdetail'}]}),
    ],
    data() {
      return {
        backgroundDisplay: "hidden",
        fullscreenheight: "0rem",
        opacity: 0,
        frameheight:0,
        frameY:0,
        frametime:0,
        frameStatus:0,
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            bulletClass: 'swiper-dot',
            bulletActiveClass: 'swiper-dot-active',
          },
          loop: true,
          on: {
            click: function (e) {
//              debugger
//              vm.clickHidePictures()
            },
          },
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    created() {
      vm = this

    },
    mounted() {
      this.menuheight = this.GLOBAL.ratio * 0.44
      this.fullscreenheight = this.GLOBAL.fullscreenheight
      this.frameheight = (document.documentElement.clientHeight*3.75/document.documentElement.clientWidth) * 0.7;
      this.frameY = -this.frameheight
    },

    methods: {

      changeSpec(id){
        for (var i = 0; i < this.data.detail.products.length; i++) {
          if (this.data.detail.products[i].id == id) {
            this.data.selected_spec = this.data.detail.products[i]
          }
        }
      },
      hiddenBackground() {
       this.frameY =  -this.frameheight;
        this.frametime = 0.3;
        this.opacity = 0;
        this.backgroundDisplay = "hidden"
      },
      pushdown(index) {
        this.frameStatus = index;
        this.frameY = 0;
        this.frametime = 0.3;
        this.opacity = 0.5;
        this.backgroundDisplay = "visible"
      },
    }
  }

</script>
<style>
  .spec_selected {
    background-color: rgba(255,207,15,0.1);
    border: solid 0.01rem #FFCF0F;
  }
  .spec_unselected {
    background-color: #F5f5f5;
  }
</style>
